<template>
    <div>
        <div class="title mb-8">
            <div class="text-6">套餐管理</div>
        </div>
        <div class="query">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input
                        v-model="queryForm.name"
                        placeholder="请输入名称"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="getData"
                        >查询</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div class="actions mb-4">
            <el-button
                icon="plus"
                type="warning"
                @click="addDialogVisible = true"
                >添加</el-button
            >
        </div>
        <div class="data mb-4">
            <el-table :data="tableData" class="w-full" bpayRecord>
                <!-- <el-table-column prop="id" label="id" /> -->
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="price" label="原价" />
                <el-table-column prop="realPrice" label="现价" />
                <el-table-column prop="day" label="时长(天)" />
                <el-table-column prop="comment" label="备注" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-space>
                            <el-button
                                type="primary"
                                icon="edit"
                                @click="handleEdit(scope.row)"
                                >编辑</el-button
                            >
                            <el-button
                                type="danger"
                                icon="delete"
                                @click="handleDelete(scope.row.id)"
                                >删除</el-button
                            >
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="total"
                :page-size="10"
                @current-change="getData"
                v-model:current-page="queryForm.page"
            />
        </div>
        <div class="add-dialog">
            <el-dialog
                title="添加套餐"
                v-model="addDialogVisible"
                width="30%"
            >
                <el-form :model="addForm" label-position="top" ref="addFormRef">
                    <el-form-item label="名称" required>
                        <el-input
                            v-model="addForm.name"
                            placeholder="请输入名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="原价" required>
                        <el-input
                            v-model="addForm.price"
                            placeholder="请输入原价"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="现价" required>
                        <el-input
                            v-model="addForm.realPrice"
                            placeholder="请输入现价"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="时长" required>
                        <el-input
                            v-model="addForm.day"
                            placeholder="请输入时长"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="备注" required>
                        <el-input
                            v-model="addForm.comment"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Check"
                            @click="addSubmit"
                            >提交</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div class="edit-dialog">
            <el-dialog
                title="修改套餐"
                v-model="editDialogVisible"
                width="30%"
            >
                <el-form
                    :model="editForm"
                    label-position="top"
                    ref="editFormRef"
                >
                <el-form-item label="名称" required>
                        <el-input
                            v-model="editForm.name"
                            placeholder="请输入名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="原价" required>
                        <el-input
                            v-model="editForm.price"
                            placeholder="请输入原价"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="现价" required>
                        <el-input
                            v-model="editForm.realPrice"
                            placeholder="请输入现价"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="时长" required>
                        <el-input
                            v-model="editForm.day"
                            placeholder="请输入时长"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="备注" required>
                        <el-input
                            v-model="editForm.comment"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Check"
                            @click="editSubmit"
                            >提交</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep, keys, pick, pickBy } from 'lodash-es'
import { ref } from 'vue'
import {
    createPackageApi,
    deletePackageApi,
    getPackagePageApi,
    updatePackageApi,
} from '@/apis/package'

const queryForm = ref({
    name: '',
    page: 1,
})

// 添加表单
const addDialogVisible = ref(false)
const addFormRef = ref<any>(null)
// 添加表单数据
const defaultAddVal = {
    // 名称（类型）
    name: '',
    // 原价
    price: 0,
    // 现价
    realPrice: 0,
    // 时长
    day: 0,
    comment: '',
}
const addForm = ref(cloneDeep(defaultAddVal))
// 添加提交
const addSubmit = () => {
    addFormRef.value!.validate(async (valid) => {
        if (valid) {
            const res = await createPackageApi(addForm.value)
            if (res) {
                addDialogVisible.value = false
                ElMessage.success('成功')
                addForm.value = cloneDeep(defaultAddVal)
                getData()
            }
        } else {
            return false
        }
    })
}

// 添加表单
const editDialogVisible = ref(false)
const editFormRef = ref<any>(null)
// 添加表单数据
const defaultEditVal = {
    id: 0,
    // 名称（类型）
    name: '',
    // 原价
    price: 0,
    // 现价
    realPrice: 0,
    // 时长
    day: 0,
    comment: '',
}
const editForm = ref(cloneDeep(defaultEditVal))
// 添加提交
const editSubmit = () => {
    editFormRef.value!.validate(async (valid) => {
        if (valid) {
            const picked = pick(editForm.value, keys(defaultEditVal))
            const id = picked.id
            delete picked.id
            const res = await updatePackageApi(id, picked)
            if (res) {
                editDialogVisible.value = false
                ElMessage.success('成功')
                editForm.value = cloneDeep(defaultEditVal)
                getData()
            }
        } else {
            return false
        }
    })
}

// 点击编辑
const handleEdit = (row) => {
    editDialogVisible.value = true
    editForm.value = cloneDeep(row)
}

// 删除
const handleDelete = (id) => {
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            await deletePackageApi(id)
            ElMessage.success('删除成功!')
            getData()
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

// 表格数据
const tableData = ref<any>([])
const total = ref(0)

// 获取表格数据
const getData = async () => {
    const queryData = cloneDeep(queryForm.value)
    const query = pickBy(queryData, (item) => item !== '' && item !== null)
    const res = (await getPackagePageApi(query)) as any
    tableData.value = res.rows
    total.value = res.total
}

getData()
</script>

<style scoped></style>
